import React from 'react'
import { Checkbox, NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { Card } from 'antd-mobile'
import { Tabs } from 'antd-mobile'

function Index() {
    const back = useNavigate()
    const zhi = useNavigate()
    return (
        <div>
            <NavBar onBack={() => back(-1)}>填写订单</NavBar>

            <h3>已选:1成人</h3>
            <Card title='郑子豪  成人票 超级会员'>
                <p>身份证  155688********2322...............................￥333.5</p>
                <p>二等座  01车07c号 ...................................................已出票</p>
            </Card>

            <Button block size='large'>
                添加/编辑乘客(成人/学生/儿童)
            </Button>
            {/* 选座 */}
            <Card title='坐席随心选'>
                <Tabs>
                    <Tabs.Tab title='第1程' key='fruits'>
                        <h4>在线选座</h4>
                        靠窗<Checkbox>A</Checkbox><Checkbox>B</Checkbox><Checkbox>C</Checkbox>过道<Checkbox>D</Checkbox><Checkbox>F</Checkbox>靠窗
                        <h4>选车厢</h4>
                        <Checkbox>02</Checkbox><Checkbox>03</Checkbox><Checkbox>04</Checkbox><Checkbox>05</Checkbox><Checkbox>06</Checkbox><Checkbox>07</Checkbox><Checkbox>08</Checkbox>
                        <h4>靠近车门</h4>
                        <Checkbox>02</Checkbox><Checkbox>03</Checkbox><Checkbox>04</Checkbox>
                    </Tabs.Tab>
                    <Tabs.Tab title='第2程' key='vegetables'>
                        第2程
                    </Tabs.Tab>
                </Tabs>
                <Button block size='large' color='warning' onClick={() => zhi('/zhi')}>
                    去支付
                </Button>
            </Card>
        </div>
    )
}

export default Index
